<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d魔方</title>
    <style>
      /*2.魔方样式*/
      /*2.1魔方需要放在中间位置*/
      #container{
        width: 500px;
        height: 500px;
        bo rder: 1px solid red;  /*border边框复合属性：1像素实线，红色*/
      /*盒模型：元素存放在盒子模式中：外边距+边框+内边距+内容（快递）*/
        margin:auto;  /*居中*/
      }
    /*2.魔方整体:3d坐标轴*/
      .box{
          width: 300px;
          height: 300px;
          bo rder: 1px solid red;
      /*    复合属性 转换属性：3d坐标轴功能---保留1个面*/
          transform-style: preserve-3d;
      /*    立体空间：没有明确x、y、z轴（自己定的坐标）*/
          transform: rotateX(45deg) rotateY(45deg);
      /*    拼魔方思路：
                1.将6个面归到一个位置----公共面：绝对定位
                2.自己拟定xyz轴，口诀：先位移，后旋转
                  z轴  向上位移        向下位移
                向左位移+90旋转       向右位移+90旋转
                向前位移+90旋转       向后位移+90旋转
                （自定定义）x轴--横面    y轴--竖面    z轴--纵面
      */
      }
     /*3.魔方6个面颜色:没有设置宽高*/
     /* 公共面：具备相同特征：都有宽高。起同一个别名即可*/
      .page{
          width: 300px;
          height: 300px;
      /*  1.将6个面归到一个位置-----公共面：绝对定位  */
          position: absolute;
      }
      .page_top{
          background: #3ed7d7;   /*颜色必须是16进制*/
          transform: translateZ(150px);
      }
      .page_bottom{
          background: #49c268;
          transform: translateZ(-150px);
      }
      .page_left{
          background: #b67c2c;
          /*向左位移+90旋转*/
          transform:translateX(-150px) rotateY(90deg);
      }
      .page_right{
          background: #193dc1;
          transform:translateX(150px) rotateY(90deg);
      }
      .page_before{
          background: #c907bb;
          transform:translateY(150px) rotateX(90deg);
      }
      .page_after{
          background: #3c0289;
          transform:translateY(-150px) rotateX(90deg);
      }
    </style>
</head>
<body>
<!--3d魔方大致结构：设计HTML结构、css样式：颜色、动画-->
<!--1.设计HTML结构：魔方6个面：有空间div（空间，特点：有宽没高）--魔方整体
      在6个面外层设计div起1个别名：box-----盒子外围还有空间：（居中、3d视效）-->
      <div id="container">
    <div class="box">
<!--                        width   style  color
    CSS有很多复合属性：border：1px    solid   red
                     border-width：2px；
                     border-style：double/dashed/solid
                     border-color：green；
-->
<div class="page_top page"></div>
<div class="page_bottom page"></div>
<div class="page_left page"></div>
<div class="page_right page"></div>
<div class="page_before page"></div>
<div class="page_after page"></div>
    </div>
        </div>
</body>
</html>